元件與 Html：從一個 React 實例出發

哈囉，各位開發者晚上好，你知道 React 幾歲嗎？

今天這篇文章我們會專注於一個實際例子，以 Q&A 的方式來介紹 React。你可能會遭遇一些沒看過的語法覺得困惑，但請沉住氣，讓筆者來一一介紹。

請先開啟範例以下的 CodeSandbox 範例，搭配文章閱讀：

https://codesandbox.io/s/github/liuderchi/chattium/tree/demo/client5/client

這是一個開發中的聊天室應用，右側預覽頁可以看到聊天訊息，左側可以看到程式碼與目錄。右側的畫面，是由左側 src 資料夾內的程式產生的。

接著，讓我們來聊聊幾個有趣的問題

❓React 程式的語法怎麼會有像是 Html 的地方？

觀察元件 src/components/App.js，可以發現在下方（line 27-line 31）有一些奇怪的語法，看起來不像 JavaScript，有點像 HTML，這是什麼呢？

它是 JavaScript 的「擴充語法」JSX (JavaScript Syntax Extension)，靠著它有階層架構的語法，我們可以像 HTML 一樣描述元件的結構，再靠著轉譯器將 JSX 轉化為 JavaScript 程式。從中可以看到 HTML div header，可以預期 App.js 會產生一個 div 與 header。而另外兩個 Welcome MessageCardGroup，就是客製化的 React 元件。

JSX 描述片段的 HTML 結構。JSX 裡面可以使用 HTML 元素或 React 元件。

?試試看，在 header 下一行插入 <div>hihi</div>，頁面會變動嗎？

❓那 React 元件是什麼？包括哪些部分？

React 元件就是「負責生成 HTML 片段」的 JS 程式

舉例來說，App.js 裡所有的程式碼，
就代表著 App 這個元件，而它生成的 HTML 寫在第 27 行到第 31 行。

慣例上，開發者會將一個元件的程式集中放在一個檔案，
作為一個模組來給其他元件重複使用。

?猜猜看，資料夾 src/components 裡面有幾個元件？

所以，從 App 元件我們能一窺頁面的架構，如果想要知道細節，只要往下檢視它使用的其他元件 Welcome.js 與 MessageGroup.js 就可以知道

接下來，我們會來看看如何控制元件來顯示資料。